import Konva from "konva";
import { message } from "@/utils/message";
import { useMapStoreHook } from "@/store/modules/map";
import { crossList } from '@/utils/api/dispatch/cross'
import { taskareaList } from '@/utils/api/dispatch/jobRegion'
import { ref, watch } from "vue"
import { storeToRefs } from 'pinia';
import router from '@/router'
import { getCross, updateCross, addCross } from '@/utils/api/dispatch/cross'
import { GetLocCodeByStaId } from '@/utils/api/BasicManagement/locations'
import DianChi from '@/assets/images/dianchi.png'

// 全局变量
var stage: any, layer: any, agvLayer: any, wheelScale: number, scale: number = 1.1, lineWidth: number = 0.4, initScale = 1, crossGroup: any,
    crossPoly: any, crossSwitch: boolean, scaleDistance = 100, crossArr = [], path: string, jiaoGuanRadius: any = null
export var mouseCorrd = ref({
    x: 0,
    y: 0
})
export { stage }
export { layer }
export { initScale }
// 站点类型
var stationType = new Map([
    [0, 'rgba(255, 120, 39, 0.7)'],
    [1, 'rgba(47, 107, 163, 1)'],
    [2, '#e52e00'],
    [3, 'rgba(123, 32, 201, 1)']
])
// 交管颜色
var crossColor = new Map([
    [1, 'rgba(126, 192, 80, 1)'],
    [2, 'rgba(52, 120, 198, 1)'],
    [3, '#FF00FF'],
    [4, '#b76f40'],
    [5, '#00FFFF']
])
// AGV尺寸
var agvSize = {
    // 旋转角度
    rotation: 90,
    // 宽度
    width: lineWidth * 20 * 1.4,
    // 高度
    height: lineWidth * 19,
    // 大小
    size: lineWidth * 20
}
// 使用useMapStoreHook函数获取pureMap
const pureMap = useMapStoreHook()
// 使用storeToRefs函数获取crossDetail
const { crossDetail } = storeToRefs(pureMap)

// 导出一个函数，用于初始化Konva舞台
export function initKonvaStage(container, refs, data, isCross) {
    stage = new Konva.Stage({
        container, // 容器
        width: refs.value.clientWidth, // 容器宽度
        height: refs.value.clientHeight, // 容器高度
        draggable: true, // 是否可拖拽
        scaleDistance: 100 // 缩放距离
    });
    // 创建一个Konva图层
    layer = new Konva.Layer();
    // 创建一个Konva图层，用于绘制AGV
    agvLayer = new Konva.Layer({ id: "agvLayer" });
    // 获取当前路由的完整路径
    path = router.currentRoute.value.fullPath
    // 交管区域绘制
    if (path !== '/jobRegion/index' && path !== '/inspectionRoute/index') getCross1()

    // 任务区域绘制
    if (path === '/jobRegion/index') getJob()

    // 滚动缩放
    mousewheel()

    // 将舞台的x轴缩放为1，y轴缩放为-1，即上下翻转
    stage.scale({ x: 1, y: -1 });
    // 将舞台的x轴位置设置为0，y轴位置设置为refs.value.clientHeight，即舞台的y轴位置设置为容器的高度
    stage.position({ x: 0, y: refs.value.clientHeight });

    // 将layer和agvLayer添加到舞台中
    stage.add(layer);
    stage.add(agvLayer);
    // 获取舞台的纯地图
    pureMap.getStage(stage);
    // 将isCross赋值给crossSwitch
    crossSwitch = isCross

    // 绘制地图
    toDrawMap(data)

    // 缩放居中
    toCenter()

    // 鼠标事件
    mouseClick()

}

// 获取双击交管名称
async function crossUpdate(id: number, name: string) {
    if (id && name !== 'station') {
        // 获取跨站信息
        let { Content } = await getCross(id)
        // 遍历pureMap.crossDetail，将Content中的值赋值给pureMap.crossDetail
        for (let key in pureMap.crossDetail) {
            pureMap.$patch((state) => { // 使用$patch方法更新state
                state.crossDetail[key] = Content[key]
            })
        }
        pureMap.getCross(pureMap.stageKonva.find(`.cross-${pureMap.crossDetail.name}`)[0])
        message(`交管名称:${crossDetail.value.name}`, { type: "success" })
    } else {
        return false
    }
}

// 鼠标事件
function mouseClick() {
    stage.on('dblclick', function (e) {
        if (e.evt.button !== 0) return false;
        if (path === '/home') {
            const name = e.target.parent?.name().split('-')[0]
            const type = e.target.parent?.attrs.type
            const staId = e.target.parent?.attrs.stationid
            if (name === "station" && type === 3) {
                GetLocCodeByStaId({ staId }).then(res => {
                    localtions(e.target.parent.attrs, res.Content)
                })
            }
            return crossUpdate(e.target.parent?.id(), name)
        }
        if (!pureMap.crossSwitch) return false;
        if (crossDetail.value.name === "" && path === '/cross/index') return message(`请先输入交管名称`, { type: "error" });
        if (crossDetail.value.name === "" && path === '/jobRegion/index') return message(`请先输入任务区域名称`, { type: "error" });

        let { x, y } = mouseCorrd.value

        pureMap.addCrossList({ stationList: { x: Number(x), y: Number(y) } })

        // 交管路线绘制
        crossDraw(x, y)
    });
    // 鼠标进入
    stage.on('mouseover', function (e) {
        const name = e.target.parent?.name().split('-')[0]
        const type = e.target.parent?.attrs.type
        if (name === "station" && type === 3) {
            stage.content.style.cursor = 'pointer';
        }
        if (name === 'cross') {
            stage.content.style.cursor = 'pointer';
        }
        // 交管区域时
        if (pureMap.crossSwitch) {
            stage.content.style.cursor = 'cell';
        }
    });
    // 鼠标离开
    stage.on('mouseout', function (e) {
        stage.content.style.cursor = 'default';
    });
    // 鼠标移动
    stage.on('pointermove', function (e) {
        // console.log('鼠标移动事件=>',e.target);

        // 从e.evt中解构出offsetX和offsetY
        const { offsetX: evtX, offsetY: evtY } = e.evt,
            // 从stage.attrs中解构出x、y、offsetX和offsetY，如果不存在则默认为0
            { x = 0, y = 0, offsetX = 0, offsetY = 0 } = stage.attrs,
            // 从stage.attrs中解构出scaleX和scaleY，如果不存在则默认为1和-1
            { scaleX = 1, scaleY = -1 } = stage.attrs

        // 计算坐标
        const corrd = {
            // 计算x坐标
            x: Number(((((evtX - x) / scaleX + offsetX) / initScale) / 100).toFixed(3)),
            // 计算y坐标
            y: Number(((((evtY - y) / scaleY + offsetY) / initScale) / 100).toFixed(3))
        }
        mouseCorrd.value = corrd
    });
}

// 任务区域显示
async function getJob() {
    const form = {
        pageNumber: 0,
        pageSize: 100,
        sortName: "createtime",
        sortType: 0
    }
    const { Content } = await taskareaList(form);
    let newData = Content.Results;
    newData.forEach(v => {
        cross(v, v.type)
    })
}

// 交管区域显示
export async function getCross1(data?: any) {
    crossArr = []
    // 定义一个表单对象，包含分页、排序等参数
    const form = {
        pageNumber: 0,
        pageSize: 200,
        sortName: "createtime",
        sortType: 0
    }
    // 调用crossList函数，传入表单对象，获取返回的Content对象
    const { Content } = await crossList(form);
    // 将Content对象的Results属性赋值给newData变量
    let newData = Content.Results;

    // 遍历newData数组，对每个元素调用cross函数，并将元素name属性添加到crossArr数组中
    newData.forEach(v => {
        cross(v, v.type)
        crossArr.push(v.name)
    })
    // 如果crossSwitch为false，则隐藏
    if (!crossSwitch) hideCross()
    // 如果当前页面为首页
    if (path === '/home') {
        // 把货位点层级放到最上层
        stage.find('#goodsAllocation').forEach(item => {
            item.moveToTop()
        });
    }
}

// 绘制交管
export function cross(data, type) {
    // 将data.stationList中的每个元素映射为一个包含x和y坐标的数组，并将坐标乘以100和initScale
    const arr = data.stationList.map(v => {
        return [v.x * 100 * initScale, v.y * 100 * initScale]
    }).flat(Infinity)

    // 根据type的值设置颜色
    // const color = type === 1 ? 'rgba(126, 192, 80, 1)' : 'rgba(52, 120, 198, 1)'
    const color = crossColor.get(type)
    // 根据path的值设置name
    const name = path === '/jobRegion/index' ? `job-${data.name}` : `cross-${data.name}`

    // 创建一个Konva.Group对象，设置id、name和type
    var group = new Konva.Group({
        id: data.id + '',
        name: name,
        type,
    })
    // 创建一个Konva.Line对象，设置name、points、stroke、strokeWidth和closed
    var crossPoly = new Konva.Line({
        // 定义一个名为line的对象
        name: "line",
        // 定义一个名为points的数组，用于存储线条的坐标点
        points: arr,
        // 定义一个名为stroke的变量，用于存储线条的颜色
        stroke: color,
        // 定义一个名为strokeWidth的变量，用于存储线条的宽度
        strokeWidth: lineWidth * 1,
        // 定义一个名为closed的变量，用于存储线条是否闭合
        closed: true,
    });

    // 遍历data.stationList数组，对每个元素v进行处理
    data.stationList.map(v => {
        // 创建一个Konva.Circle对象，设置其属性
        const circle = new Konva.Circle({
            // 设置对象的名称为"circle"
            name: "circle",
            // 设置圆的半径为lineWidth * 2
            radius: lineWidth * 2,
            // 设置圆的填充颜色为color
            fill: color,
            // 设置圆的x坐标为v.x * 100 * initScale
            x: Number(v.x * 100) * initScale,
            // 设置圆的y坐标为v.y * 100 * initScale
            y: Number(v.y * 100) * initScale,
            initScale,
        });
        group.add(circle)
        // 提升层级
        // circle.moveUp()
    })

    // group.on('dblclick', function (event) {
    //   const target = event.target.parent
    //   console.log(target)
    // });

    group.add(crossPoly)
    layer.add(group)
}

// 显示交管
export function showCross(data?: any) {
    if (data) {
        data.forEach(v => {
            stage.find(`.cross-${v.name}`)[0].show()
        })
        return
    }
    crossArr.forEach(v => {
        stage.find(`.cross-${v}`)[0].show()
    })
}

// 隐藏交管
export function hideCross(data?: any, id?: any) {
    if (data) {
        data.forEach(v => {
            if (v.id !== +id) {
                stage.find(`.cross-${v.name}`)[0].hide()
            }
        })
        return
    }
    crossArr.forEach(v => {
        stage.find(`.cross-${v}`)[0].hide()
    })
}

// 新增时交管的绘制
function crossDraw(x1, y1) {
    // 将x1乘以100
    const x = x1 * 100
    // 将y1乘以100
    const y = y1 * 100
    // 将crossDetail.value.stationList中的每个元素的x和y乘以100和initScale，并将结果展平
    const arr = crossDetail.value.stationList.map(v => {
        return [v.x * 100 * initScale, v.y * 100 * initScale]
    }).flat(Infinity)

    // 根据路径判断name的值
    const name = path === '/jobRegion/index' ? `job-${crossDetail.value.name}` : `cross-${crossDetail.value.name}`

    // 在pureMap.stageKonva中查找name对应的group和poly
    crossGroup = pureMap.stageKonva.find(`.${name}`)[0]
    crossPoly = pureMap.stageKonva.find(`.${name}`)[0]?.find('.line')[0]

    // 如果crossGroup不存在或者arr的长度小于等于2，则创建新的group和poly
    if (!crossGroup || arr.length <= 2) {
        // 创建新的group
        crossGroup = new Konva.Group({
            name: name
        })
        // 创建新的poly
        crossPoly = new Konva.Line({
            // 定义一个名为 "line" 的对象，用于描述一条线条
            name: "line",
            // 初始化一个空数组，用于存储线条上的点坐标
            points: [],
            // 设置线条的颜色为红色
            stroke: 'red',
            // 设置线条的宽度，宽度值为变量 lineWidth 乘以 1
            strokeWidth: lineWidth * 1,
            // 设置线条是否闭合，这里设置为 true 表示线条是闭合的
            closed: true
        });
        // 将poly添加到group中
        crossGroup.add(crossPoly)
        // 将group添加到layer中
        layer.add(crossGroup)
        // 更新pureMap的targetCross
        pureMap.$patch({
            targetCross: crossGroup
        })
    } else {
        // 如果crossGroup存在，则更新poly的points
        crossPoly.points(arr)
    }
    // 创建一个Konva的圆形对象
    const circle = new Konva.Circle({
        // 设置圆形的名称
        name: "circle",
        // 设置圆形的半径
        radius: jiaoGuanRadius ? jiaoGuanRadius : lineWidth * 2,
        // 设置圆形的填充颜色
        fill: 'red',
        // 设置圆形的x坐标
        x: Number(x) * initScale,
        // 设置圆形的y坐标
        y: Number(y) * initScale,
        // 设置圆形的初始缩放比例
        initScale
    });
    // 将圆形添加到crossGroup中
    crossGroup.add(circle)
}

// 缩放居中
function toCenter() {
    // 获取绘制内容的边界框
    const boxRect = layer.getClientRect();

    // 计算缩放比例
    initScale = Math.min((stage.width() - 50) / boxRect.width, (stage.height() - 50) / boxRect.height)
    // initScale = boxRect.width > boxRect.height ? stage.width() / boxRect.width : stage.height() / boxRect.height
    // console.log('缩放比例=>', initScale);

    // 获取图层中的所有子元素
    const shapes = layer.getChildren()
    // 获取AGV图层中的所有子元素
    const agvShapes = agvLayer.getChildren()
    // 计算字体大小，字体大小为线宽的20倍
    const fontSize = lineWidth * 20
    // 计算大小，如果字体大小乘以初始缩放比例大于3，则大小为字体大小乘以初始缩放比例，否则大小为3
    const size = fontSize * initScale > 3 ? fontSize * initScale : 3
    // 缩放图形层
    shapes.forEach(v => {
        // 获取v的属性
        const { name } = v.attrs
        // 如果name以'station'开头
        if (name.split('-')[0] === 'station') {
            // 获取v的子元素'.text'，并设置字体大小
            v.findOne('.text').fontSize(size)
            // 获取v的子元素'.stationRect'，并设置宽度为'.text'的宽度
            v.findOne('.stationRect').width(v.findOne('.text').getTextWidth())
            // 获取v的子元素'.stationRect'，并设置高度为'.text'的字体大小
            v.findOne('.stationRect').height(v.findOne('.text').fontSize())
            // 获取v的子元素'.stationRect'，并设置圆角为'.text'的字体大小除以10
            v.findOne('.stationRect').cornerRadius(v.findOne('.text').fontSize() / 10)

            // 设置v的x坐标为v的x坐标乘以initScale
            v.x(v.x() * initScale)
            // 设置v的y坐标为v的y坐标乘以initScale
            v.y(v.y() * initScale)

            // 设置v的偏移量为'.stationRect'的宽度和高度的一半
            v.offset({
                x: v.findOne('.stationRect').width() / 2,
                y: v.findOne('.stationRect').height() / 2
            })

        } else if (name === 'road') {
            // 获取v的points，并乘以initScale
            let points = v.points().map(v => {
                return v * initScale
            })

            // 设置v的points为乘以initScale后的points
            v.points(points)

        } else if (name === 'bezier') {
            // 设置v的sceneFunc为函数
            v.attrs.sceneFunc = function (ctx, shape) {
                // 获取shape的attrs中的moveTo和curveTo
                let { moveTo, curveTo } = shape.attrs
                // 开始绘制路径
                ctx.beginPath();
                // 移动到moveTo的位置，并乘以initScale
                ctx.moveTo(moveTo[0] * initScale, moveTo[1] * initScale);
                // 绘制贝塞尔曲线，并乘以initScale
                ctx.bezierCurveTo(curveTo[0] * initScale, curveTo[1] * initScale, curveTo[2] * initScale, curveTo[3] * initScale, curveTo[4] * initScale, curveTo[5] * initScale);
                // 设置线条颜色为白色
                ctx.setAttr('strokeStyle', '#ffffff');
                // 设置线条宽度为lineWidth
                ctx.setAttr('lineWidth', lineWidth);
                // 绘制线条
                ctx.stroke();
            }
        }
    })

    // 重新计算边界
    const nextRect = layer.getClientRect();
    stage.offset({
        x: nextRect.x - (stage.width() - nextRect.width) / 2,
        y: -nextRect.y + (stage.height() - nextRect.height) / 2
    })

}

// 地图绘制
function toDrawMap(data) {
    data.roads.map(v => {
        if (v.linetype === 0) return LINE(v)   // 直 线 
        if (v.linetype === 1) return bezier(v) // 凹弧线
        if (v.linetype === 2) return bezier(v) // 凸弧线
        if (v.linetype === 3) return bezier(v) // 贝塞尔
    })
    data.stations.map(v => { return CIRCLE(v) })
}


// 贝塞尔曲线/弧线
function bezier(val) {
    // 从 val 中解构出 points 和 assistList
    let { points, assistList } = val
    // 创建一个 Konva.Shape 对象，命名为 bezier
    var bezier = new Konva.Shape({
        name: 'bezier',
        // moveTo 方法用于设置贝塞尔曲线的起点
        moveTo: [points[0], points[1]],
        // curveTo 方法用于设置贝塞尔曲线的控制点和终点
        curveTo: [assistList[0].x, assistList[0].y, assistList[1].x, assistList[1].y, points[2], points[3]],
        // sceneFunc 方法用于绘制贝塞尔曲线
        sceneFunc: function (ctx, shape) {
            let { moveTo, curveTo } = shape.attrs
            ctx.beginPath();
            ctx.moveTo(moveTo[0], moveTo[1]);
            ctx.bezierCurveTo(curveTo[0], curveTo[1], curveTo[2], curveTo[3], curveTo[4], curveTo[5]);
            // 设置线条颜色
            ctx.setAttr('strokeStyle', '#ffffff');
            // 设置线条宽度
            ctx.setAttr('lineWidth', lineWidth);
            ctx.stroke();
        }
    });

    bezier.shadowColor("#93f8fb"); // 设置阴影颜色
    bezier.shadowBlur(lineWidth);  // 设置阴影模糊度
    bezier.shadowOffsetX(0);       // 设置阴影 X 偏移量
    bezier.shadowOffsetY(0);       // 设置阴影 Y 偏移量
    bezier.shadowEnabled(true);    // 启用阴影

    layer.add(bezier)

    // const val2 = {
    //     points: [points[0], points[1], points[2], points[3]],
    //     assistList: [{ x: assistList[0].x, y: assistList[0].y }, { x: assistList[1].x, y: assistList[1].y }]
    // };
    // const { x: arrowX, y: arrowY } = getBezierMidPoint(val2); // 获取贝塞尔曲线的中间点

    // // 创建箭头对象
    // var arrow = new Konva.Arrow({
    //     // 设置箭头名称
    //     name: 'road',
    //     // 设置箭头起点和终点坐标
    //     points: [val.points[0], val.points[1], arrowX, arrowY],
    //     // 设置箭头指向终点
    //     pointerAtBeginning: false,
    //     // 设置箭头长度
    //     pointerLength: lineWidth,
    //     // 设置箭头宽度
    //     pointerWidth: lineWidth,
    //     // 设置箭头颜色
    //     fill: 'red'
    // });
    // // 创建箭头对象
    // var arrow1 = new Konva.Arrow({
    //     // 设置箭头名称
    //     name: 'road',
    //     // 设置箭头起点和终点坐标
    //     points: [val.points[2], val.points[3], arrowX, arrowY],
    //     // 设置箭头指向终点
    //     pointerAtBeginning: false,
    //     // 设置箭头长度
    //     pointerLength: lineWidth,
    //     // 设置箭头宽度
    //     pointerWidth: lineWidth,
    //     // 设置箭头颜色
    //     fill: 'red'
    // });

    // if (val.direction === 1) {
    //     // console.log('单向箭头=>', val);
    //     layer.add(arrow)
    // } else if (val.direction === 2) {
    //     layer.add(arrow)
    //     layer.add(arrow1)
    // }

}
function getBezierMidPoint({ points, assistList }) {
    const P0 = [points[0], points[1]];
    const P1 = [assistList[0].x, assistList[0].y];
    const P2 = [assistList[1].x, assistList[1].y];
    const P3 = [points[2], points[3]];

    const t = 0.5;

    const x = Math.pow(1 - t, 3) * P0[0] + 3 * Math.pow(1 - t, 2) * t * P1[0] + 3 * (1 - t) * Math.pow(t, 2) * P2[0] + Math.pow(t, 3) * P3[0];
    const y = Math.pow(1 - t, 3) * P0[1] + 3 * Math.pow(1 - t, 2) * t * P1[1] + 3 * (1 - t) * Math.pow(t, 2) * P2[1] + Math.pow(t, 3) * P3[1];

    return { x, y };
}

// 直线
async function LINE(val) {
    // 创建一个Konva.Line对象，用于绘制线条
    var line = new Konva.Line({
        // 设置线条的名称
        name: 'road',
        // 设置线条的坐标点
        points: val.points.map(v => { return v }),
        // 设置线条的颜色
        stroke: '#ffffff',
        // 设置线条的宽度
        strokeWidth: lineWidth,
        // 设置线条的连接方式
        lineJoin: 'round'
    });

    line.shadowColor("#93f8fb"); // 设置阴影颜色
    line.shadowBlur(lineWidth);  // 设置阴影模糊度
    line.shadowOffsetX(0);       // 设置阴影 X 偏移量
    line.shadowOffsetY(0);       // 设置阴影 Y 偏移量
    line.shadowEnabled(true);    // 启用阴影

    layer.add(line);

    // 计算箭头中心点的x坐标
    const arrowX = (val.points[2] + val.points[0]) / 2
    // 计算箭头中心点的y坐标
    const arrowY = (val.points[3] + val.points[1]) / 2
    // 创建箭头对象
    var arrow = new Konva.Arrow({
        // 设置箭头名称
        name: 'road',
        // 设置箭头起点和终点坐标
        points: [val.points[0], val.points[1], arrowX, arrowY],
        // 设置箭头指向终点
        pointerAtBeginning: true,
        // 设置箭头长度
        pointerLength: lineWidth,
        // 设置箭头宽度
        pointerWidth: lineWidth,
        // 设置箭头颜色
        fill: 'red'
    });
    // 创建箭头对象
    var arrow1 = new Konva.Arrow({
        // 设置箭头名称
        name: 'road',
        // 设置箭头起点和终点坐标
        points: [val.points[2], val.points[3], arrowX, arrowY],
        // 设置箭头指向终点
        pointerAtBeginning: true,
        // 设置箭头长度
        pointerLength: lineWidth,
        // 设置箭头宽度
        pointerWidth: lineWidth,
        // 设置箭头颜色
        fill: 'red'
    });

    // val.direction === 1 ? layer.add(arrow) : layer.add(arrow1); layer.add(arrow)

    if (val.direction === 1) {
        // console.log('单向箭头=>', val);
        layer.add(arrow)
    } else if (val.direction === 2) {
        layer.add(arrow)
        layer.add(arrow1)
    }

}

// 货位点
export function localtions(station, data) {
    // 从station对象中解构出stationname、x、y、type、stationid属性
    const { stationname, x, y, type, stationid } = station
    // 创建一个Konva.Group对象，设置其属性
    const group = new Konva.Group({
        // 设置组名
        name: `localtion-${stationname}`,
        x, y,
        scaleY: -1,
        type: type,
        stationid: stationid,
        scale: {
            x: initScale,
            y: -initScale
        },
    })

    var xy = {
        x: 0,
        y: 0
    }

    data.forEach((v, i) => {
        // 创建一个Konva.Group对象，命名为localtion
        const localtionG = new Konva.Group({
            name: `localtion`,
        })
        // 创建一个Konva.Text对象，命名为text，设置文本内容、字体大小、填充颜色、对齐方式
        const text = new Konva.Text({
            name: "text",
            text: v,
            fontSize: lineWidth * 100,
            fill: 'yellow',
            align: 'center',
        });
        // 创建一个Konva.Rect对象，命名为stationRect，设置宽度、高度、填充颜色、圆角、透明度
        const circle = new Konva.Rect({
            name: 'stationRect',
            width: text.getTextWidth(),
            height: text.fontSize(),
            fill: stationType.get(type || 0),
            cornerRadius: text.fontSize() / 10,
            opacity: 0.8,
        });
        // 将circle和text添加到localtionG中
        localtionG.add(circle).add(text)
        // 设置xy的x和y值
        xy = {
            x: circle.width() / 2,
            y: text.fontSize() * 3
        }
        // 设置localtionG的y偏移量
        localtionG.offsetY(text.fontSize() * 2 * i)

        // 将localtionG添加到group中
        group.add(localtionG)
    })

    // 设置group的x和y偏移量
    group.offset({
        x: xy.x,
        y: xy.y
    })

    // 将group添加到layer中
    layer.add(group)

    // 5秒后销毁group
    setTimeout(() => {
        group.destroy()
    }, 5000)
}

// 站点
function CIRCLE(val) {
    // 创建一个Konva.Group对象，用于存放站点信息
    const group = new Konva.Group({
        name: `station-${val.stationname}`,
        id: 'goodsAllocation',
        x: val.x,
        y: val.y,
        scaleY: -1,
        type: val.type,
        stationid: val.stationid,
        className: `stationid-${val.stationid}` // 添加一个类名用于查找
    })

    // 创建一个Konva.Text对象，用于显示站点名称
    const text = new Konva.Text({
        name: "text",
        text: val.stationname,
        // fontSize: lineWidth * 1.6,
        fontSize: lineWidth * 20,
        fill: 'yellow',
        align: 'center',
    });

    // 加载图标图像（可以使用本地图像或在线图像）
    var imageObj = new Image();
    // 当图像加载完成后，创建一个Konva.Image对象，并设置其位置和大小
    imageObj.onload = function () {
        var icon = new Konva.Image({
            x: text.x() + text.width(), // 图标位置在文本后面
            y: text.y() + 0.3, // 调整图标垂直位置以对齐文本
            image: imageObj,
            width: lineWidth + 2, // 图标宽度
            height: lineWidth + 2, // 图标高度
        });

        // 将文本和图标添加到层中
        if (val.type === 2) {
            group.add(icon)
        }
    };
    imageObj.src = DianChi;

    // 创建一个Konva.Rect对象，用于显示站点背景
    const circle = new Konva.Rect({
        // 定义一个名为stationRect的变量
        name: 'stationRect',
        // 设置宽度为文本的宽度
        width: text.getTextWidth(),
        // 设置高度为文本的字体大小
        height: text.fontSize(),
        // 设置填充颜色为stationType中对应type的值
        fill: stationType.get(val.type || 0),
        // 设置圆角半径为文本字体大小除以10
        cornerRadius: text.fontSize() / 10,
        // 设置透明度为0.8
        opacity: 0.8,
    });

    // 创建一个Konva.Circle对象，用于显示站点中心
    const center = new Konva.Circle({
        radius: lineWidth / 10,
        fill: '#5a9cf8',
        offset: {
            x: -circle.width() / 2,
            y: -circle.height() / 2
        }
    });

    // 设置group对象的偏移量，使其居中显示
    group.offset({
        x: circle.width() / 2,
        y: circle.height() / 2
    })

    // 将circle和text添加到group中
    group.add(circle).add(text)

    // 将group添加到layer中
    layer.add(group)
}

// 选中站点变色
export function changeColor(id) {
    const targetGroup = stage.find((node) => {
        return node.getAttr('stationid') === id;
    })[0];
    // 改变颜色
    if (targetGroup) {
        targetGroup.children.forEach(v => {
            if (v.name() === 'stationRect') {
                v.fill('#66FFFF')
            }
            if (v.name() === 'text') {
                v.fill('#FF3366')
            }
        })
    }
}

// 取消选中站点变回来
export function cancelColor(id) {
    const targetGroup = stage.find((node) => {
        return node.getAttr('stationid') === id;
    })[0];
    // 改变颜色
    if (targetGroup) {
        targetGroup.children.forEach(v => {
            if (v.name() === 'stationRect') {
                v.fill(stationType.get(0))
            }
            if (v.name() === 'text') {
                v.fill('yellow')
            }
        })
    }
}

// 滚动缩放
function mousewheel() {
    // 监听鼠标滚轮事件
    stage.on('wheel', e => {
        // 阻止默认事件
        e.evt.preventDefault();
        // 获取当前缩放比例
        var oldScale = stage.scaleX();
        // 获取鼠标位置
        var mousePointTo = {
            x: stage.getPointerPosition().x / oldScale - stage.x() / oldScale,
            y: stage.getPointerPosition().y / oldScale - stage.y() / oldScale
        };

        // 根据滚轮方向计算新的缩放比例
        var newScale = e.evt.deltaY < 0 ? oldScale * scale : oldScale / scale;
        // 设置新的缩放比例
        stage.scale({ x: newScale, y: -newScale });

        // 计算新的位置
        var newPos = {
            x: -(mousePointTo.x - stage.getPointerPosition().x / newScale) * newScale,
            y: -(mousePointTo.y - stage.getPointerPosition().y / newScale) * newScale
        };
        // 设置新的位置
        stage.position(newPos);

        // 计算新的固定缩放比例
        const newFixedScale = (1 / newScale) * 1.5
        // 缩放图形层
        const shapes = layer.getChildren()
        shapes.forEach(v => {
            const { name } = v.attrs
            // 判断是否为站点
            if (name.split('-')[0] === 'station') {
                if (newScale > 6 && newScale < 60) {
                    v.scale({
                        x: newFixedScale * 5,
                        y: -newFixedScale * 5
                    })
                }
            }
        })
        //打印缩放比例
        // console.log('缩放比例=>', newScale / oldScale);
        // 缩放交管线条
        if (newScale > 6) {
            // 查找舞台上所有类名为 'line' 的图形元素，并对每个元素执行以下操作
            stage.find('.line').forEach(line => {
                line.strokeWidth(line.strokeWidth() / (newScale / oldScale));
            });
            stage.find('.circle').forEach(circle => {
                circle.radius(circle.radius() / (newScale / oldScale));
            });
            jiaoGuanRadius = stage.find('.circle')[0]?.radius();
        }
    });
}

// 函数用于获取两个角度之间的最短角度差
function getShortestAngle(currentAngle, targetAngle) {
    // 计算两个角度之间的差值
    var angleDiff = targetAngle - currentAngle;
    // 如果差值大于等于180度，则减去360度
    if (angleDiff >= 180) {
        angleDiff -= 360;
        // 如果差值小于等于-180度，则加上360度
    } else if (angleDiff <= -180) {
        angleDiff += 360;
    }
    // 返回最短角度差
    return angleDiff;
}
// 将弧度转换为角度
function radiansToDegrees(radians) {
    return radians * (180 / Math.PI);
}
// agv模型
export function agvModel(data) {
    if (stage === undefined) return false;
    let activateAgvs = data.filter(v => { return v.connectionStatus !== 0 && v.connectionStatus !== undefined })
    // 绘制agv模型
    if (stage.children[1].children.length === 0) {
        agv(activateAgvs)
    } else {
        // 遍历activateAgvs数组
        activateAgvs.forEach(v => {
            // 根据agvId查找对应的模型
            let model = stage.find(`#agv${v.agvId}`)[0]
            // 如果找不到对应的模型，则返回false
            if (model === undefined) return false
            // 计算模型旋转角度与目标角度的最短角度差
            let angle = getShortestAngle(model.rotation(), radiansToDegrees(v.angle))
            // let angle = getShortestAngle(model.rotation(), v.angle)
            if (angle < 3 && angle > -3) {
                angle = 0
            }

            // 创建一个Konva.Tween对象，用于实现模型的平移和旋转
            let tween = new Konva.Tween({
                // 指定模型
                node: model,
                // 持续时间
                duration: 1,
                // 目标x坐标
                x: v.x * 100 * initScale,
                // 目标y坐标
                y: v.y * 100 * initScale,
                // 目标旋转角度
                rotation: model.rotation() + angle,
                // 更新函数，用于更新模型子元素的旋转角度
                onUpdate: () => {
                    model.children[2].rotation(model.rotation())
                }
            });
            if (v.errorCode) {
                // 如果AGV处于故障状态，则将AGV模型填充颜色设置为红色
                stage.find('#agvRect' + v.agvId)[0].fill('#ff0000');
            } else if (v.carry === 1) {
                // 如果AGV处于载货状态，则将AGV模型填充颜色设置为黄色
                stage.find('#agvRect' + v.agvId)[0].fill('#FFFF00');
            } else {
                // 如果AGV既不处于故障状态也不处于载货状态，则设置为默认颜色
                stage.find('#agvRect' + v.agvId)[0].fill('#409eff');
            }
            // 播放动画
            tween.play()
            // console.log('agv', v);
            if (v.connectionStatus === 0) {
                stage.find('#agvRect' + v.agvId)[0].fill('#409eff');
                // 如果AGV处于离线状态，则将AGV模型透明度设置为0.3
                stage.find('#agv' + v.agvId)[0].opacity(0.3);
            }
        })
    }
}
function agv(data) {
    let { width, height, size } = agvSize
    // 弧度 = angle * (Math.PI / 180)
    // 角度 = angle * (180 / Math.PI)
    data.forEach(v => {
        // 创建一个Konva.Group对象，用于存放AGV模型
        var modelGroup = new Konva.Group({
            name: "agv",
            id: `agv${v.agvId}`,
            x: v.x * 100 * initScale, // 设置AGV模型的x坐标
            y: v.y * 100 * initScale, // 设置AGV模型的y坐标
            scaleY: -1, // 设置AGV模型的y轴缩放为-1，使其上下颠倒
            rotation: radiansToDegrees(v.angle) // 设置AGV模型的旋转角度
        });
        // 创建一个Konva.Rect对象，用于绘制AGV模型的主框架
        var model = new Konva.Rect({
            id: `agvRect${v.agvId}`,
            width,
            height,
            offset: { x: width / 2, y: height / 2 }, // 设置模型中心点为偏移量
            fill: '#409eff', // 设置模型填充颜色
            shadowBlur: 1, // 设置模型阴影模糊度
            cornerRadius: 0.1, // 设置模型圆角半径
            opacity: 0.7, // 设置模型透明度
        });
        // 创建一个Konva.Rect对象，用于绘制AGV模型的车顶
        var carTop = new Konva.Rect({
            width: width / 10, // 设置车顶宽度
            height: height / 2, // 设置车顶高度
            offset: { x: -width / 2 + width / 10, y: height / 4 }, // 设置车顶中心点为偏移量
            fill: '#1e1e1e'
        });
        // 创建一个Konva.Text对象，用于绘制AGV模型的编号
        var text = new Konva.Text({
            text: v.agvName.match(/^\D*(\d+)/)[1],
            fontSize: size / 2,
            fontFamily: 'KaiTi',
            fill: 'white',
            rotation: radiansToDegrees(v.angle),
            offset: {
                x: size / 8,
                y: size / 4
            }
        });
        modelGroup.add(model);
        modelGroup.add(carTop);
        modelGroup.add(text);
        agvLayer.add(modelGroup)
    })
}